<template>
    <div class="head">
        <div @click="selectDate" class="date">{{ chooseDate[0] }}-{{ chooseDate[1] }}-{{ chooseDate[2] }} <i
                class="iconfont icon-xiangxiajiantou"></i>
        </div>
        <div class="title">健康瘦身</div>
        <div class="week">{{ getDayOfWeek(chooseDate) }}</div>
    </div>
    <van-popup v-model:show="show" position="bottom" round>
        <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate" @cancel="cancel"
            @confirm="confirm" />
    </van-popup>

    <div class="mt47"></div>
</template>

<script setup>
import { ref } from 'vue';
import { formateDate } from '@/utils/formateDate.js';
import { getDayOfWeek } from '@/utils/getDayOfWeek.js'


const show = ref(false)
const currentDate = ref(formateDate(new Date().getTime()))
const minDate = new Date(2020, 0, 1)
const maxDate = new Date()
const chooseDate = ref(formateDate(new Date().getTime()))
const emits = defineEmits(['selectDate'])


const selectDate = () => {
    show.value = true;
}

const cancel = () => {
    show.value = false;
}

const confirm = () => {
    show.value = false;
    chooseDate.value = currentDate.value;
    emits('selectDate', chooseDate.value);
}


</script>

<style lang="less" scoped>
.head {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0.35rem 0.37rem 0.35rem 0.37rem;
    position: fixed;
    top: 0;

    .date {
        flex: 1;
        text-align: left;
        font-weight: 400;
        font-size: 0.32rem;
        line-height: 0.48rem;
        color: #000000;

        .iconfont {
            font-size: 12px;
        }
    }

    .title {
        flex: 1;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        line-height: 0.56rem;
        color: #000000;
    }

    .week {
        color: #3176FF;
        flex: 1;
        font-size: 0.43rem;
        text-align: right;
    }
}

.mt47 {
    margin-top: 1.25rem;
}
</style>